<template>
  <div class="header-nav">
    <el-menu
      :default-active="activePath"
      mode="horizontal"
      background-color="#000"
      text-color="#fff"
      router
    >
      <el-menu-item index="/">首页</el-menu-item>
      <el-menu-item index="/product">商品管理</el-menu-item>
      <el-menu-item index="/params">商品参数</el-menu-item>
      <el-menu-item index="/ad">商品广告</el-menu-item>
    </el-menu>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const activePath = computed(() => route.path)
</script>

<style scoped>
.header-nav {
  position: sticky; 
  top: 0;
  z-index: 100;
}
</style>
